<template>
  <div class="w h" style="overflow-y:auto">
    <header class="page-header">
      <div>
        <div class="user-name" v-if="userName || carId">Hi，{{ userName || carId }}
        </div>
        <div class="user-autograph">让我们今天做的更高效吧！</div>
      </div>
      <div class="user-photo" @click="goProfilePage">
        <img class="w h" src="@/assets/main/imgs/user-photo.png" />
      </div>
    </header>
    <main class="page-main">
      <div class="title-category">
        <div class="category-title"> 我的任务 </div>
      </div>
      <div class="menu">
        <div class="w5 menu-column">
          <div class="menu-max" @click="goPage('completed')">
            <div class="menu-item item-1">
              <div class="item-icon"></div>
              <div class="item-label">已完成</div>
              <div class="item-count">{{ statistics.completed || statistics.completed || 0 }} Task</div>
            </div>
          </div>
          <div class=" menu-min" @click="goPage('cancel')">
            <div class="menu-item item-3">
              <div class="item-icon"></div>
              <div class="item-label">已取消</div>
              <div class="item-count">{{ statistics.cancel }} Task</div>
            </div>
          </div>
        </div>
        <div class="w5 menu-column">
          <div class=" menu-min" @click="goPage('wait')">
            <div class="menu-item item-2">
              <div class="item-icon"></div>
              <div class="item-label">待接单</div>
              <div class="item-count">{{ statistics.pending }} Task</div>
            </div>
          </div>
          <div class=" menu-max" @click="goPage('going')">
            <div class="menu-item item-4">
              <div class="item-icon"></div>
              <div class="item-label">进行中</div>
              <div class="item-count">{{ statistics.running }} Task</div>
            </div>
          </div>
        </div>
      </div>
      
      
      <div class="m-t10">
        <!-- 在开发模式下生效 -->
        <van-button v-if="isDevelopment" @click="test">sendNotifyNumber</van-button>
      </div>

      <!-- <div class="f-b title-category p-b16">
        <div class="category-title"> 今日任务 </div>
        <div class="category-title-btn" @click="goTaskPage">查看全部</div>
      </div>
      <div class="task-list">
        <div v-for="i in 2" class="task-item task-wait">
          <div class="task-name">机器点检</div>
          <div class="task-time">07:00 - 07:30</div>
          <div class="task-tag">
            <div class="tag-item" v-for="d in 5">Urgent</div>
          </div>
        </div>
        <div v-for="i in 2" class="task-item task-going">
          <div class="task-name">机器点检</div>
          <div class="task-time">07:00 - 07:30</div>
          <div class="task-tag">
            <div class="tag-item" v-for="d in 5">Urgent</div>
          </div>
        </div>
        <div v-for="i in 2" class="task-item task-completed">
          <div class="task-name">机器点检</div>
          <div class="task-time">07:00 - 07:30</div>
          <div class="task-tag">
            <div class="tag-item" v-for="d in 5">Urgent</div>
          </div>
        </div>
        <div v-for="i in 2" class="task-item task-cancel">
          <div class="task-name">机器点检</div>
          <div class="task-time">07:00 - 07:30</div>
          <div class="task-tag">
            <div class="tag-item" v-for="d in 5">Urgent</div>
          </div>
        </div>
      </div> -->
      <!-- <page-footer isMainPage> 已经到达底部了 </page-footer> -->
    </main>
  </div>
</template>

<script lang="ts">

import PageBase from '@/views/mixins/page-base';
import { type Store } from 'vuex';
import { type routerState } from '@/store/modules/router';



export default {
  mixins: [PageBase],
  data() {
    return {

    }
  },
  methods: {
    goTaskPage() {
      this.$router.push({ name: 'task' });
    },
    goProfilePage() {
      this.$router.push({ name: 'profile' });
    },
    goPage(expandRouterName: string) {
      (this.$store as Store<any>).commit('router/expandRouterName', { to: this.$route.name, form: expandRouterName });
      this.$router.push({ name: `${expandRouterName}` });
    },

    test() {
      this.sendNotifyNumber({
        pending: this.statistics.pending + 4,
        running: this.statistics.running + 4,
        cancel: this.statistics.cancel + 4,
        completed: this.statistics.completed + 4,
      })
    }
  },
  created() {
    // if ((this.$store as { getters: routerState }).getters.reloadPage) {
    //   window.location.reload();
    //   // this.goBackOrForward(0);
    // }



  }
}
</script>

<style lang="scss" scoped>
.page-header {
  padding: 48px 24px 0px 24px;
  @extend .f-b, .w, .box-b;

  .user-name {
    color: #12175e;
    font-size: 28px;
    font-weight: 700;
  }

  .user-autograph {
    color: #575757;
    font-size: 14px;
    font-weight: 400;
  }

  .user-photo {
    width: 38px;
    height: 38px;
    box-shadow: -3px 7px 13px 0px #f1f7ffff;
    border-radius: 8px;
  }
}

.page-main {
  padding: 0 24px;

  @include title-category(32px);

  .menu {
    @extend .f-b, .w;

    .menu-item {
      height: 100%;
      border-radius: 14px;
      position: relative;
      user-select: none;

      .item-label {
        bottom: 46px;
        font-size: 16px;
        font-weight: 600;
        padding-left: 16px;
        @extend .position-absolute;
      }

      .item-count {
        bottom: 16px;
        font-size: 14px;
        font-weight: 400;
        padding-left: 16px;
        @extend .position-absolute;
      }

      // menu 按钮样式
      &.item-1 {
        @include home-menu-item(linear-gradient(135deg, #7dc8e7db 0%, #7dc8e7af 100%),
          #7dc7e784,
          1,
          #12175e);
      }

      &.item-2 {
        @include home-menu-item(linear-gradient(135deg, #7d88e7ff 0%, #7d88e7bc 100%),
          #7d88e79f,
          2,
          #ffffffff);
      }

      &.item-3 {
        @include home-menu-item(linear-gradient(135deg, #e77d7dbf 0%, #e77d7db5 100%),
          #e77d7d70,
          3,
          #ffffffff);
      }

      &.item-4 {
        @include home-menu-item(linear-gradient(135deg, #81e89eff 0%, #81e89e59 100%),
          #81e89e8f,
          4,
          #12175e);
      }
    }

    .menu-max {
      height: 170px;
      @extend .w, .box-b;

      &:nth-child(1) {
        @extend .p-t8, .p-r4;
      }

      &:nth-child(2) {
        @extend .p-t8, .p-l4;
      }

      .item-label,
      .item-count {
        color: #12175eff;
      }

      .item-icon {
        top: 16px;
        left: 16px;
        width: 92px;
        height: 70px;
        @extend .position-absolute;
      }
    }

    .menu-min {
      @extend .w, .box-b;
      height: 132px;

      &:nth-child(1) {
        @extend .p-t8, .p-l4;
      }

      &:nth-child(2) {
        @extend .p-t8, .p-r4;
      }

      .item-label,
      .item-count {
        color: #ffffffff;
      }

      .item-icon {
        top: 16px;
        left: 16px;
        width: 22px;
        height: 22px;
        @extend .position-absolute;
      }
    }
  }

  .task-list {
    .task-item {
      position: relative;
      margin-bottom: 10px;
      border-radius: 15px;
      background: var(--wait-task-bg-color);
      width: 100%;
      height: 114px;
      box-sizing: border-box;
      padding: 16px;

      &::before {
        @include task-tip-border(36px, 20px, 14px);
      }

      &::after {
        @include task-tip-right-btn(20px, 14px);
      }
    }
  }
}
</style>
